<script setup name="AboutUs">
import { useI18n } from 'vue-i18n'
import { imageUrl } from '@/utils/imageUrl'
const { t } = useI18n()
</script>

<template>
	<!-- 产品展示 -->
	<section class="products">
		<!-- MatDesign平台 -->
		<div class="product-card">
			<!-- 移动端标题（仅移动端显示） -->
			<div class="product-title mobile-only">
				<h2>{{ t('AboutUs.AboutUs.title1') }}</h2>
			</div>

			<!-- PC端内容布局 -->
			<div class="product-content">
				<!-- 左侧文字内容 -->
				<div class="product-info">
					<!-- PC端标题（仅PC端显示） -->
					<div class="product-title desktop-only">
						<h2>{{ t('AboutUs.AboutUs.title1') }}</h2>
					</div>

					<!-- 描述文字 -->
					<div class="product-description">
						<p>{{ t('AboutUs.AboutUs.content1') }}</p>
					</div>

					<!-- 特征徽章 -->
					<div class="product-features">
						<span class="feature-badge">
							<span class="icon">📊</span>
							{{ t('AboutUs.AboutUs.tag1') }}
						</span>
						<span class="feature-badge">
							<span class="icon">🔬</span>
							{{ t('AboutUs.AboutUs.tag2') }}
						</span>
						<span class="feature-badge">
							<span class="icon">🎯</span>
							{{ t('AboutUs.AboutUs.tag3') }}
						</span>
					</div>
				</div>

				<!-- 右侧图片容器 -->
				<div class="product-image-container">
					<el-image
						class="product-image"
						:src="imageUrl('MDTK.jpg', '关于我们')"
						:preview-src-list="[imageUrl('MDTK.jpg', '关于我们')]"
						fit="cover"
						preview-teleported
					/>
				</div>
			</div>
		</div>

		<!-- AI4Alloys平台 -->
		<div class="product-card reverse">
			<!-- 移动端标题（仅移动端显示） -->
			<div class="product-title mobile-only">
				<h2>{{ t('AboutUs.AboutUs.title2') }}</h2>
			</div>

			<!-- PC端内容布局 -->
			<div class="product-content">
				<!-- 左侧文字内容 -->
				<div class="product-info">
					<!-- PC端标题（仅PC端显示） -->
					<div class="product-title desktop-only">
						<h2>{{ t('AboutUs.AboutUs.title2') }}</h2>
					</div>

					<!-- 描述文字 -->
					<div class="product-description">
						<p>{{ t('AboutUs.AboutUs.content2') }}</p>
					</div>

					<!-- 特征徽章 -->
					<div class="product-features">
						<span class="feature-badge">
							<span class="icon">🤖</span>
							{{ t('AboutUs.AboutUs.tag4') }}
						</span>
						<span class="feature-badge">
							<span class="icon">⚡</span>
							{{ t('AboutUs.AboutUs.tag5') }}
						</span>
						<span class="feature-badge">
							<span class="icon">💰</span>
							{{ t('AboutUs.AboutUs.tag6') }}
						</span>
					</div>
				</div>

				<!-- 右侧图片容器 -->
				<div class="product-image-container">
					<el-image
						class="product-image"
						:src="imageUrl('AI4Alloys.jpg', '关于我们')"
						:preview-src-list="[imageUrl('AI4Alloys.jpg', '关于我们')]"
						fit="cover"
						preview-teleported
					/>
				</div>
			</div>
		</div>
	</section>
</template>

<style scoped lang="scss">
/*
 * ===========================================
 * 关于我们 - 产品展示样式
 * ===========================================
 */

.products {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-20) var(--space-4);
}

/* ===========================================
 * 产品卡片样式
 * =========================================== */

.product-card {
	margin-bottom: var(--space-20);
	background: var(--card-bg);
	border-radius: var(--radius-2xl);
	padding: var(--space-8);
	box-shadow: var(--card-shadow);
	backdrop-filter: var(--card-backdrop);
	border: 1px solid var(--card-border);
	transition: all var(--transition-base);

	&:hover {
		transform: var(--card-hover-transform);
		box-shadow: var(--card-hover-shadow);
	}

	&:last-child {
		margin-bottom: 0;
	}

	/* 显示/隐藏控制 */
	.mobile-only {
		display: none;
	}

	.desktop-only {
		display: block;
	}

	/* PC端内容布局 */
	.product-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
		align-items: center;
	}

	/* PC端偶数行反向布局 */
	&.reverse .product-content {
		.product-info {
			order: 2;
		}
		.product-image-container {
			order: 1;
		}
	}

	/* 文字内容区域 */
	.product-info {
		/* 标题 */
		.product-title {
			margin-bottom: var(--space-6);

			h2 {
				font-size: var(--font-size-3xl);
				font-weight: var(--font-weight-bold);
				color: var(--text-title);
				margin: 0;
				line-height: var(--line-height-tight);
			}
		}

		/* 描述文字区域 */
		.product-description {
			margin-bottom: var(--space-6);

			p {
				font-size: var(--font-size-lg);
				line-height: var(--line-height-relaxed);
				color: var(--text-primary);
				margin: 0;
			}
		}

		/* 特征徽章区域 */
		.product-features {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-2);

			.feature-badge {
				display: inline-flex;
				align-items: center;
				gap: var(--space-2);
				padding: var(--space-2) var(--space-4);
				background: var(--brand-primary-50);
				color: var(--brand-primary-700);
				border: 1px solid var(--brand-primary-200);
				border-radius: var(--radius-full);
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-medium);
				transition: all var(--transition-base);

				&:hover {
					background: var(--brand-primary-100);
					color: var(--brand-primary-800);
					transform: translateY(-1px);
				}

				.icon {
					font-size: var(--font-size-base);
				}
			}
		}
	}

	/* 图片容器 */
	.product-image-container {
		.product-image {
			width: 100%;
			height: 320px;
			object-fit: initial;
			border-radius: var(--radius-xl);
			overflow: hidden;
			box-shadow: var(--shadow-lg);
			transition: all var(--transition-base);

			&:hover {
				transform: scale(1.02);
				box-shadow: var(--shadow-xl);
			}

			:deep(.el-image) {
				width: 100%;
				height: 100%;
				cursor: pointer;
			}

			:deep(.el-image__inner) {
				object-fit: cover;
				width: 100%;
				height: 100%;
				transition: all var(--transition-base);
				cursor: pointer;
			}
		}
	}
}

/* ===========================================
 * 响应式设计
 * =========================================== */

@media (max-width: 1024px) {
	.product-card {
		/* 显示移动端标题，隐藏PC端标题 */
		.mobile-only {
			display: block;
		}

		.desktop-only {
			display: none;
		}

		/* 移动端标题样式 */
		.product-title.mobile-only {
			margin-bottom: var(--space-6);

			h2 {
				font-size: var(--font-size-xl);
				font-weight: var(--font-weight-bold);
				color: var(--text-title);
				margin: 0;
				line-height: var(--line-height-tight);
			}
		}

		/* 改为垂直布局 */
		.product-content {
			grid-template-columns: 1fr !important;
			gap: var(--space-8);
		}

		/* 重置偶数行的order */
		&.reverse .product-content {
			.product-info,
			.product-image-container {
				order: unset;
			}
		}

		.product-info {
			.product-description {
				margin-bottom: var(--space-4);

				p {
					font-size: var(--font-size-sm);
				}
			}

			.product-features {
				margin-bottom: 0;
			}
		}

		.product-image-container {
			.product-image {
				height: 300px;
			}
		}
	}
}

@media (max-width: var(--breakpoint-md)) {
	.products {
		padding: var(--space-16) var(--space-3);
	}

	.product-card {
		margin-bottom: var(--space-16);
		/* 移动端触摸优化 */
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;

		.product-title.mobile-only {
			margin-bottom: var(--space-5);

			h2 {
				font-size: var(--font-size-lg);
			}
		}

		.product-content {
			gap: var(--space-6);
		}

		.product-info {
			.product-description {
				margin-bottom: var(--space-3);

				p {
					font-size: var(--font-size-xs);
				}
			}

			.product-features {
				.feature-badge {
					font-size: var(--font-size-xs);
					padding: var(--space-1) var(--space-3);

					.icon {
						font-size: var(--font-size-sm);
					}
				}
			}
		}

		.product-image-container {
			.product-image {
				height: 250px;
				border-radius: var(--radius-lg);
			}
		}
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.products {
		padding: var(--space-12) var(--space-2);
	}

	.product-card {
		margin-bottom: var(--space-12);

		.product-title.mobile-only {
			margin-bottom: var(--space-4);

			h2 {
				font-size: var(--font-size-base);
			}
		}

		.product-content {
			gap: var(--space-4);
		}

		.product-info {
			.product-description {
				margin-bottom: var(--space-2);

				p {
					font-size: 11px;
					line-height: var(--line-height-normal);
				}
			}

			.product-features {
				gap: var(--space-1);

				.feature-badge {
					font-size: 10px;
					padding: 1px var(--space-2);
					/* 移动端增加点击区域 */
					min-height: 28px;

					.icon {
						font-size: var(--font-size-xs);
					}
				}
			}
		}

		.product-image-container {
			.product-image {
				height: 220px;
			}
		}
	}
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
	.products {
		padding: var(--space-10) var(--space-1);
	}

	.product-card {
		margin-bottom: var(--space-10);

		.product-title.mobile-only {
			margin-bottom: var(--space-3);

			h2 {
				font-size: var(--font-size-sm);
			}
		}

		.product-content {
			gap: var(--space-3);
		}

		.product-info {
			.product-description {
				margin-bottom: var(--space-1);

				p {
					font-size: 10px;
				}
			}

			.product-features {
				.feature-badge {
					font-size: 9px;
					padding: 1px var(--space-1);
					min-height: 24px;

					.icon {
						font-size: 10px;
					}
				}
			}
		}

		.product-image-container {
			.product-image {
				height: 180px;
			}
		}
	}
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
	.product-card {
		/* 移动端禁用悬停效果 */
		&:hover {
			transform: none;
		}

		/* 移动端点击反馈 */
		&:active {
			transform: scale(0.98);
		}

		.product-info .product-features .feature-badge {
			/* 移动端禁用徽章悬停效果 */
			&:hover {
				transform: none;
				background: var(--brand-primary-50);
			}

			/* 移动端点击反馈 */
			&:active {
				background: var(--brand-primary-100);
			}
		}

		.product-image-container .product-image {
			/* 移动端禁用图片悬停效果 */
			&:hover {
				transform: none;
			}

			/* Element Plus 图片预览在移动端的优化 */
			:deep(.el-image):hover {
				opacity: 1;
			}
		}
	}
}
</style>
